<template>
  <div>
    <h4>当前最新的count值为: {{this.$store.state.count}}</h4>
    <h4>{{this.$store.getters.showNum}}</h4>
    <button @click="btnHandler1">+1</button>
    <button @click="btnHandler2">+N</button>
    <button @click="btnHandler3">+1 Async</button>
    <button @click="btnHandler4">+N Async</button>

  </div>
</template>

<script>
	export default {
		name: "Addition",
    methods: {
			btnHandler1() {
        this.$store.commit('addCount');
      },
			btnHandler2() {
				// commit 是触发某个mutation
				this.$store.commit('addN', 3);
      },

      // 方式1触发action
			btnHandler3() {
				// dispatch 是触发某个action
				this.$store.dispatch('addAsync');
			},

      // 传入参数触发action
			btnHandler4() {
				this.$store.dispatch('addNAsync', 5);
      },
    }
	}
</script>

<style scoped>

</style>